import React, { Component } from 'react'
import { Modal, Form, Input, Select } from 'antd'

class MyModal extends Component {
    
    //确认按钮
    handleOk = (e) => {
        const { dispatch, upAddInfo, selectedNode, selName, selPhone, form } = this.props
        form.validateFields(
            (err) => {
                if (!err) {
                    const {name, phone, sex, duties, landTel, cliqueTel} = form.getFieldsValue();
                    dispatch({
                        type: upAddInfo.action,
                        payload: {
                            groupId: selectedNode.id ? selectedNode.id : null,
                            name: selName,
                            phone: selPhone,
                            page: 1,
                            upAddInfo: {
                                id: upAddInfo.id,
                                groupId: upAddInfo.groupId,
                                name: name,
                                sex: sex,
                                duties: duties,
                                phone: phone,
                                landTel: landTel,
                                cliqueTel: cliqueTel
                            }
                        }
                    })
                }
            },
        );
    }

    //取消按钮
    handleCancel = (e) => {
        const { dispatch } = this.props
        dispatch({
            type: 'telBookEnterprise/setUpAddInfo',
            payload: {
                title: "",
                visible: false,
                action: false,
                groupId: null
            }
        })
    }

    //表单内对齐尺寸
    formItemLayout = {
        labelCol: {
          xs: { span: 10 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 16 },
        },
      };


    render() {
        const {
            upAddInfo,
            form: { getFieldDecorator, setFieldsValue }
        } = this.props
        return (
            <div>
                <Modal
                    title={upAddInfo.title}
                    visible={upAddInfo.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                    >
                    <Form>
                        <Form.Item
                            {...this.formItemLayout}
                            label="姓名"
                            >
                            {getFieldDecorator('name', {
                                rules: [{
                                    required: true, whitespace: true, message: '请输入用户名',
                                }],
                            })(
                                <Input />
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="电话"
                            >
                            {getFieldDecorator('phone', {
                                rules: [{ required: true, whitespace: true, pattern: '^\\d{11}$', message: '请输入电话号' }],
                            })(
                                <Input addonBefore={"+86"} style={{ width: '100%' }} />
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="性别"
                            >
                            {getFieldDecorator('sex', {
                                rules: [{
                                    required: true, whitespace: true, message: '请选择性别'
                                }],
                            })(
                                <Select
                                    placeholder="请选择性别"
                                >
                                    <Select.Option value="男">男</Select.Option>
                                    <Select.Option value="女">女</Select.Option>
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="职务"
                            >
                            {getFieldDecorator('duties')(
                                <Input />
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="固定电话"
                            >
                            {getFieldDecorator('landTel')(
                                <Input />
                            )}
                        </Form.Item>
                        <Form.Item
                            {...this.formItemLayout}
                            label="集团小号"
                            >
                            {getFieldDecorator('cliqueTel')(
                                <Input />
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
    componentDidUpdate(){
        const {
            upAddInfo,
            form: { setFieldsValue }
        } = this.props
        if(upAddInfo.isUpdate){
            setFieldsValue({
                'name': upAddInfo.name,
                'phone': upAddInfo.phone,
                'sex': upAddInfo.sex,
                'duties': upAddInfo.duties,
                'landTel': upAddInfo.landTel,
                'cliqueTel': upAddInfo.cliqueTel
            })
            upAddInfo.isUpdate = false
        }
    }
}

const MyModalForm = Form.create({})(MyModal);

export default MyModalForm